Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved Visual Cohesion on About Us Page #113

Closed
wants to merge 10 commits into from

Conversation

admwln
Copy link
Contributor

@admwln admwln commented Oct 9, 2024

Fixes #107 : Change About Us page design

I have enhanced the visual cohesion between the background of the About Me page and the foreground content by:

-Adding a radial gradient to the background of the main container.
-Applying a blurry backdrop-filter to the container to create a subtle blur effect.

This change helps unify the background and foreground elements, creating a smoother and more cohesive design. The effect is subtle but noticeable, and it improves the overall aesthetics of the page without being distracting.

Testing:

-Verified the visual changes on Chrome and Firefox.
-Ensured the layout remains responsive and the effect renders properly on desktop and mobile.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for opening a pull request @admwln. We'll will review it as soon as possible 🙌❤️

Copy link
Owner

@Virtual4087 Virtual4087 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @admwln. Could you please provide a screenshot of the result.

@admwln
Copy link
Contributor Author

admwln commented Oct 9, 2024

Hey @Virtual4087 Sure thing!

Desktop:
desktop

Mobile:
mobile

Copy link
Owner

@Virtual4087 Virtual4087 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good but I think changing the bg color itself would make it better. Could you try that once? If not, I'll merge this pr cause this doesn't look bad either. Try making the "about us" block not stand out too much.

Copy link
Owner

@Virtual4087 Virtual4087 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a ss of your changes

@admwln
Copy link
Contributor Author

admwln commented Oct 9, 2024

I had another go of it, with a more subtle background, and some minor style changes:
desktop
mobile

Please note that I have added a background color to body for smaller screens. The following image illustrates what happens without said change. The problem seems to arise because of how the background photograph is implemented, however, I could not find a satisfying solution.
mobile-broken

Copy link
Owner

@Virtual4087 Virtual4087 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good but there seems to be some conflict in your branch cause I just merged another pr

@admwln
Copy link
Contributor Author

admwln commented Oct 9, 2024

Oh I see, it seems that pr #121, which is already merged to main, fixes issue #107 (that the present pr tries to solve). The two prs are not compatible. It's one or the other, as far as I can tell. I have no problem with you choosing the other solution over mine. It was a fun exercise! Looking at the newly merged changes, it seems that pr #121 fixes the problem that's depicted in my last screenshot, so it might be preferable regardless.

Copy link
Owner

@Virtual4087 Virtual4087 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@admwln True but I don't want to not merge your changes after you've already done so much. So maybe you could create another fork and just change the text format like color and stuff to make it more clean? The current "About Us" section's text content is not very appealing. If you can you can make it more minimalistic.

@admwln
Copy link
Contributor Author

admwln commented Oct 9, 2024

Thank you, @Virtual4087.

See pr #122.

@Virtual4087
Copy link
Owner

@admwln Done I'll be closing this pr. Thanks for the help.

@Virtual4087 Virtual4087 closed this Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change About Us page design
2 participants